<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/time.css">
</head>

<body>
    <div class="timeContainer">
        <div class="Navigation">
            <ul>
                <li>
                    <a href="javascript:;">豆瓣</a>
                </li>
                <li>
                    <a href="javascript:;">读书</a>
                </li>
                <li>
                    <a href="javascript:;">电影</a>
                </li>
                <li>
                    <a href="javascript:;">音乐</a>
                </li>
                <li>
                    <a href="javascript:;">同城</a>
                </li>
                <li>
                    <a href="javascript:;">小组</a>
                </li>
                <li>
                    <a href="javascript:;">阅读</a>
                </li>
                <li>
                    <a href="javascript:;">FM</a>
                </li>
                <li>
                    <a href="javascript:;">时间</a>
                </li>
                <li>
                    <a href="javascript:;">豆品</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="JavaScript:;">下载豆瓣客户端</a>
                </li>
                <li>
                    <a href="javascript:;">登陆/注册</a>
                </li>
            </ul>
        </div>
        <div class="timecontent">
            <div class="newest">
                <img src="https://img1.doubanio.com/dae/niffler/niffler/images/3a23891e-d638-11ea-8c9a-1256adf40319.jpg"
                    alt="">
            </div>
            <div class="navItem">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/timg.jpg" alt="">
                            <p>青椒学院</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/timg.jpg" alt="">
                            <p>时间发现</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/timg.jpg" alt="">
                            <p>全部专栏</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/timg.jpg" alt="">
                            <p>签到</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./images/timg.jpg" alt="">
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="recommend">
                <div class="recommendIntroduce">
                    <h2>新品尝鲜：从《教父》看美国黑帮史</h2>
                    <div class="recommendContent">
                        <img src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/1f63a874-f7ef-11ea-a542-9adc3f52cc59.jpg?imageView2/2/q/80/w/240/h/240/format/jpg"
                            alt="">
                        <div class="contentIntroduce">
                            <h2>美国故事的背后——黑帮电影中的社会、文化与历史</h2>
                            <span class="newPrice">99.00元</span>
                            <sapn class="price">129.00元</sapn>
                            <i>主讲人 李洋</i>
                            <p>透过39部黑帮题材影视剧，带你了解一个亚文化符号背后的社会、历史与文化</p>
                        </div>
                        <div class="audition">
                            <div class="box">
                                <a href="javascript:;">
                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3685162830,1870445540&fm=26&gp=0.jpg"
                                        alt="">
                                    <span class="shiting">试听</span>
                                    <span class="jieshao">发刊词 如何看懂黑帮片——黑帮、流行文化与二十世纪的历史</span>
                                </a>
                            </div>
                            <div class="box">
                                <a href="javascript:;">
                                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3685162830,1870445540&fm=26&gp=0.jpg"
                                        alt="">
                                    <span class="shiting">试听</span>
                                    <span class="jieshao">《教父》的诞生：两个穷途之人的爆发</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="audio">
                <h2 class="listName">秋日特惠</h2>
                <div class="list">
                    <div class="inactive">
                        <a href="javascript:;">
                            <img src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg alt="">
                            <h2 class=" name">童话交响梦——古典音乐这样听</h2>
                            <span class="newPrice">79.00元</span>
                            <p class="price">129.00元</p>
                        </a>
                    </div>
                    <div class="inactive">
                        <a href="javascript:;">
                            <img src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg alt="">
                            <h2 class=" name">童话交响梦——古典音乐这样听</h2>
                            <span class="newPrice">79.00元</span>
                            <p class="price">129.00元</p>
                        </a>
                    </div>
                    <div class="inactive">
                        <a href="javascript:;">
                            <img src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg alt="">
                            <h2 class=" name">童话交响梦——古典音乐这样听</h2>
                            <span class="newPrice">79.00元</span>
                            <p class="price">129.00元</p>
                        </a>
                    </div>
                    <div class="inactive">
                        <a href="javascript:;">
                            <img src="https://qnmob3.doubanio.com/dae/niffler/niffler/images/7b98d672-9f1c-11ea-8b53-6e94b03bf1e1.jpg?imageView2/2/q/80/w/240/h/240/format/jpg alt="">
                            <h2 class=" name">童话交响梦——古典音乐这样听</h2>
                            <span class="newPrice">79.00元</span>
                            <p class="price">129.00元</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>